<template>
  <div class="bank">
    <mu-appbar :z-depth="0" style="width: 100%;top:0" color="white" text-color="primary">
      <mu-button icon slot="left">
        <header-back></header-back>
      </mu-button>
      银行卡
      <mu-button icon slot="right" @click="openFullScreenDialog">
        <mu-icon value="add"></mu-icon>
      </mu-button>
    </mu-appbar>
    <mu-list textline="three-line" class="loadmore-wrap">
      <mu-paper round style="margin-bottom: 1rem" v-for="item in list" v-bind:key="item.id" :z-depth="0">
        <mu-list-item :key="item.id">
          <mu-list-item-action>
            <mu-avatar color="primary">
              <mu-icon value="credit_card"></mu-icon>
            </mu-avatar>
          </mu-list-item-action>
          <mu-list-item-content>
            <mu-list-item-title>{{item.bankName}}</mu-list-item-title>
            <mu-list-item-sub-title>
              <span>{{item.bankAccount}}</span>
            </mu-list-item-sub-title>
            <mu-list-item-sub-title>
              {{item.bankUname}}
            </mu-list-item-sub-title>
          </mu-list-item-content>
          <mu-list-item-action>
            <mu-button icon @click="remove(item.id)">
              <mu-icon color="red" value="remove_circle"></mu-icon>
            </mu-button>
          </mu-list-item-action>
        </mu-list-item>
      </mu-paper>
    </mu-list>
    <mu-dialog width="360" transition="slide-right" fullscreen :open.sync="openFullScreen">
      <mu-appbar :z-depth="0" color="primary" title="添加银行卡">
        <mu-button slot="left" icon @click="closeFullScreenDialog">
          <mu-icon value="close"></mu-icon>
        </mu-button>
        <mu-button slot="right" flat @click="sureFullScreenDialog">
          保存
        </mu-button>
      </mu-appbar>
      <div style="padding: 24px;">
        <mu-container>
          <mu-form ref="form" :model="validateForm" class="mu-demo-form">
            <mu-form-item label="收款银行：" prop="bankName" :rules="bankNameRules">
              <mu-text-field class="text-field" v-model="validateForm.bankName"
              ></mu-text-field>
            </mu-form-item>
            <mu-form-item label="银行账号：" prop="bankAccount" :rules="bankAccountRules">
              <mu-text-field class="text-field" v-model="validateForm.bankAccount"
              ></mu-text-field>
            </mu-form-item>
            <mu-form-item label="收款银行户名：" prop="bankUname" :rules="bankUnameRules">
              <mu-text-field class="text-field" v-model="validateForm.bankUname"
              ></mu-text-field>
            </mu-form-item>
          </mu-form>
        </mu-container>
      </div>
    </mu-dialog>
  </div>
</template>
<script>
  import headerBack from '@/components/headerBack';

  export default {
    name: 'bank',
    data() {
      return {
        list: [],
        openFullScreen: false,
        bankNameRules: [
          {validate: (val) => !!val, message: '必须填写收款银行'}
        ],
        bankAccountRules: [
          {validate: (val) => !!val, message: '必须填写银行账号'}
        ],
        bankUnameRules: [
          {validate: (val) => !!val, message: '必须填写收款银行户名'}
        ],
        validateForm: {
          bankUname: '',
          bankAccount: '',
          bankName: ''
        }
      }
    },
    components: {
      headerBack
    },
    methods: {
      openFullScreenDialog() {
        this.openFullScreen = true;
      },
      closeFullScreenDialog() {
        this.openFullScreen = false;
      },
      sureFullScreenDialog() {
        this.$refs.form.validate().then((result) => {
          this.postRequest("/user/addBank", this.validateForm).then(res => {
            if (res.code === 200) {
              this.$toast.success("添加成功！");
              this.listData();
              this.openFullScreen = false;
            }
          });
        });
      },
      listData() {
        const _self = this;
        this.postRequest("/user/bankList").then(res => {
          if (res.code === 200) {
            if (res.data) {
              _self.list = res.data;
            }
          }
        });
      },
      openPage(id) {
        this.$router.push({name: 'declareInfo', query: {id: id}});
      },
      remove(id) {
        this.$confirm('确定要删除？', '提示', {
          type: 'warning'
        }).then(({result}) => {
          if (result) {
            let param = {
              id: id
            }
            this.postRequest("/user/removeBank", param).then(res => {
              if (res.code === 200) {
                this.$toast.success("删除成功");
                this.listData();
              }
            });
          }
        });
      }
    },
    mounted: function () {
      this.listData();
    }
  }
</script>

<style scoped lang="less">

  .bank {
    position: fixed;
    top: 0;
    width: 100%;
    /*overflow: auto;*/
    height: 100%;
    z-index: 999;
    background-color: #f9f9f9;
  }

  .loadmore-wrap {
    width: 100%;
    height: 90%;
    overflow: scroll;
    padding: 10px;
  }

</style>
